<template>
  <div class="market-reference layout-main no-side-menu">
    <p class="fs-18">
      <c-icon type="hangqing" class="primary" :size="20"></c-icon>
      <span>行情参考</span>
    </p>
    <c-desc
      :colon="false"
      :column="1"
      :columns="descColumns"
      :labelStyle="{ width: '80px' }"
    >
      <template v-slot:source>
        <a-space>
          <c-button
            v-for="item in exchange"
            :key="item.id"
            :type="item.id === activedExchange ? 'primary' : ''"
            @click="changeExchange(item.id)"
          >
            {{ item.name }}
          </c-button>
        </a-space>
      </template>
      <template v-slot:category>
        <a-space>
          <c-button
            v-for="item in exchangeCategorys"
            :key="item.futuresContract"
            size="small"
            :type="item.futuresCode === activedCategory ? 'primary' : ''"
            @click="changeCategory(item.futuresCode)"
            >{{ item.futuresName }}</c-button
          >
        </a-space>
      </template>
    </c-desc>
    <c-table
      :data="tableData"
      :columns="tableColumns"
      bordered
      size="small"
      :loading="loading"
      :reload="false"
    >
      <template v-for="item in tableColumnsSlots" v-slot:[item.prop]="{ row }">
        <span
          v-if="socketFuture.futureData[row.futuresContract.toLowerCase()]"
          :key="item.title"
          class="fs-16 bold"
          :class="
            color(
              item.prop,
              socketFuture.futureData[row.futuresContract.toLowerCase()]
            )
          "
          >{{
            socketFuture.futureData[row.futuresContract.toLowerCase()][
              item.prop
            ]
          }}</span
        >
      </template>
      <template v-slot:chg="{ row }">
        <span
          v-if="socketFuture.futureData[row.futuresContract.toLowerCase()]"
          class="fs-16 bold"
          :class="
            color(
              'chg',
              socketFuture.futureData[row.futuresContract.toLowerCase()]
            )
          "
          >{{
            chg(socketFuture.futureData[row.futuresContract.toLowerCase()])
          }}</span
        >
      </template>
    </c-table>
  </div>
</template>

<script>
import { getfuturesbyexchange } from "@/api/market";
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      exchange: [
        {
          id: "SHFE",
          name: "上海期货交易所"
        },
        {
          id: "DCE",
          name: "大连商品交易所"
        }
        // {
        //   id: "CZCE",
        //   name: "郑州商品交易所"
        // }
      ],
      exchangeCategorys: [],
      activedCategory: undefined,
      activedExchange: "SHFE",
      descColumns: [
        {
          label: "参考来源",
          slot: "source"
        },
        {
          label: "参考品种",
          slot: "category"
        }
      ],
      loading: false,
      tableData: [],
      tableColumns: [
        {
          title: "合约",
          dataIndex: "futuresName"
        },
        {
          title: "最新价",
          prop: "lastPrice",
          scopedSlots: { customRender: "lastPrice" }
        },
        {
          title: "开盘价",
          prop: "openPrice",
          scopedSlots: { customRender: "openPrice" }
        },
        {
          title: "涨跌",
          prop: "change",
          scopedSlots: { customRender: "change" }
        },
        {
          title: "涨跌幅",
          prop: "chg",
          scopedSlots: { customRender: "chg" }
        },
        {
          title: "最高价",
          prop: "highestPrice",
          scopedSlots: { customRender: "highestPrice" }
        },
        {
          title: "最低价",
          prop: "lowestPrice",
          scopedSlots: { customRender: "lowestPrice" }
        },
        {
          title: "买入价",
          prop: "bidPrice1",
          scopedSlots: { customRender: "bidPrice1" }
        },
        {
          title: "卖出价",
          prop: "askPrice1",
          scopedSlots: { customRender: "askPrice1" }
        },
        {
          title: "昨结算价",
          prop: "preSettlementPrice",
          scopedSlots: { customRender: "preSettlementPrice" }
        },
        {
          title: "买量",
          prop: "bidVolumn1",
          scopedSlots: { customRender: "bidVolumn1" }
        },
        {
          title: "卖量",
          prop: "askVolumn1",
          scopedSlots: { customRender: "askVolumn1" }
        },
        {
          title: "成交量",
          prop: "volumn",
          scopedSlots: { customRender: "volumn" }
        },
        {
          title: "持仓量",
          prop: "openInterest",
          scopedSlots: { customRender: "openInterest" }
        }
      ]
    };
  },
  computed: {
    ...mapState(["socketFuture"]),
    tableColumnsSlots() {
      let filterColumns = ["futuresName", "chg"];
      let res = this.tableColumns.filter(
        i => !i.dataIndex && filterColumns.indexOf(i.dataIndex) === -1
      );
      return res;
    },
    color() {
      return (val, row) => {
        let res;
        switch (val) {
          case "lastPrice":
            res = row.change > 0 ? "danger" : row.change < 0 ? "success" : "";
            break;
          case "highestPrice":
            res = "danger";
            break;
          case "lowestPrice":
            res = "success";
            break;
          case "change":
            res = row.change > 0 ? "danger" : row.change < 0 ? "success" : "";
            break;
          case "openPrice":
            var difference = row.openPrice - row.preSettlementPrice;
            res = difference > 0 ? "danger" : difference < 0 ? "success" : "";
            break;
          case "chg":
            res = row.change > 0 ? "danger" : row.change < 0 ? "success" : "";
            break;
          default:
            break;
        }
        return res;
      };
    },
    // 计算涨跌幅
    chg() {
      return row => {
        let res;
        if (row.lastPrice && row.preSettlementPrice) {
          res = ((row.change / row.preSettlementPrice) * 100).toFixed(2) + "%";
        } else {
          res = "";
        }
        return res;
      };
    }
  },
  methods: {
    ...mapActions(["futureWsSend"]),
    //   更新行情
    updateMarket() {},
    sendFuturesContract() {
      let futuresContract = this.tableData.map(item => item.futuresContract);
      this.futureWsSend(futuresContract);
    },
    changeCategory(val) {
      this.activedCategory = val;
      let futuresContractData = this.exchangeCategorys.filter(
        i => i.futuresCode === val
      );
      this.tableData = futuresContractData[0].futuresContractList;
      this.sendFuturesContract();
    },
    changeExchange(val) {
      this.activedExchange = val;
      this.queryCategoryList();
    },
    queryCategoryList() {
      this.loading = true;
      getfuturesbyexchange({
        exchange: this.activedExchange
      })
        .then(res => {
          this.exchangeCategorys = res;
          this.activedCategory = res[0].futuresCode;
          this.tableData = res[0].futuresContractList;
          this.sendFuturesContract();
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.queryCategoryList();
  }
};
</script>

<style lang="scss" scoped>
.market-reference {
  padding: 20px;
}
</style>
